<template>
	<view class="caty-active">
		<van-search :value="value" placeholder="请输入搜索关键词" @search="onSearch"/>
		<view class="cate-liket">
			<!-- 装修文章-->
			<view class="avtivex" v-for="(item,index) in infolist.topArticleResp" :key="index" v-if="item.simpleTextDesc.isAll == true" @click="xtiaozkon(item)">
				<!-- 装修避坑 -->
				     <image class="cate-comig" :src="item.images[0]" mode=""></image>
					<view class="jiacu">{{item.title}}</view>
					<view class="aetra">{{item.simpleTextDesc.desc}}</view>
				</view>
				
			<grid-view type="masonry" :cross-axis-count="2" :main-axis-gap="15" :cross-axis-gap="15" style="width: 100%;">
			<view class="cate-rietyon" v-for="(item,index) in infolist.topArticleResp" :key="index" v-if="item.simpleTextDesc.isAll == false" @click="xtiaozkon(item)">
				<!-- 装修知识 -->
					<image class="cate-comig" :src="item.images[0]" mode=""></image>
					<view class="caet-repd">{{item.title}}</view>

				 </view>	
			<!-- 经典案例 -->
		  <view class="cate-rietyon" v-for="(item,index) in infolist.classicCaseArticleResp" :key="index" >
				<image class="cate-comig" :src="item.images[0]" mode='' @click="xtiaozkon(item)"></image>
				<view class="acty-caty" @click="xtiaozkon(item)">{{forminfodeet(item.category.channel)}}</view>
				<view class="caet-repd" @click="xtiaozkon(item)"> {{item.title}}</view>
					<span class="cate-spanonpsetas">{{item.favorites}}</span>
				<van-icon class="cate-iconvter" name="star-o" v-if="item.favoritesFlag == false" @click="souchang(item)"/>
				<van-icon class="cate-iconvter" name="star" color="#ff7144" v-else @click="souchang(item)"/>
			 </view>
			 
			 <!-- 文章视频 -->
	
			 <view class="cate-rie" v-for="(item,index) in infolist.userOpusArticleResp" :key="index" >
				        <!-- 图文 -->
			 			<view v-if="item.articleInfoResp.detailType == 'Json'" @click="loaddocen(item)">
			 			<img class="cate-img"
			 			 :src="item.articleInfoResp.images[0]" mode='widthFix' bindtap="viewImage" alt="" style="width: 100%;" >
			 			</view>
						<!-- 视频 -->
						<view v-else @click="loaddocen(item)">
						<img class="cate-img" :src="item.articleInfoResp.extendData.thumbnailUrl"> 	
						<view class="cate-opemak">
						<van-icon name="play" />
						</view>		
					
						</view>
						
						<span class="cate-conspan" @click="loaddocen(item)">{{item.articleInfoResp.title}}</span>
						<view> 
							<img class="cate-image" @click="actione(item)" v-if="item.simpleUserInfoResp.avatar != null" :src="item.simpleUserInfoResp.avatar" alt="">
							<img class="cate-image" @click="actione(item)" v-else src="@/static/missing-face.png" alt="">
							<test class="cate-clogion" @click="loaddocen(item)">{{item.simpleUserInfoResp.nick}}</test>
							 <van-icon class="cate-icon" name="star-o" size="18" v-if="item.articleInfoResp.favoritesFlag == false" @click="aaaa(item)"/>
							 <van-icon class="cate-icon" name="star" size="18" v-else color="#ff7144" @click="aaaa(item)"/>
							 <span class="cate-spanon">{{item.articleInfoResp.favorites}}</span>
						</view>
			 		</view>
			</grid-view>
			</view>
		 <van-loading class="actoue" v-show="siopen" size="24px" type="spinner">加载中...</van-loading>
	</view>
</template>

<script>
	import Api from '@/http/api.js'	
	import employeesConst from "@/employees/employees.js";
	const hireTypet = {};
	employeesConst.hireTydeet.forEach((item) => {
	  hireTypet[item.channel] = item.value;
	});
	export default{
		data(){
			return{
				value:'',
				siopen:false,
					infolist:[],
					infopiont:'',
					info:{
						cancel:"",
						articleId:''
					},
						q:{
							size:Number,
							index:1,
							searchText:''
						},
						 a:10,
						 type:''
				}
			},
			onLoad(option) {
				this.q.searchText = option.text
				this.value = option.text
				this.loaceckfr()
			},
			//加载更多
			onReachBottom:function(){
				const that = this;
				this.siopen = true
				this.q.size = this.q.size+20
				this.a = this.q.size
				setTimeout(async ()=>{
				let rec = await Api.xdiscover(this.q)
				this.infolist = rec.data
				 that.siopen = false
				},1000)
			},
			methods:{
				async loaceckfr(){
					this.q.size = this.a
					const res = await Api.xdiscover(this.q)
					this.infolist = res.data
				},
				// 搜索
				onSearch(event){
					console.log(event.detail)
					this.value = event.detail
					this.q.searchText = this.value
					this.loaceckfr()
				},
				// 装修经典案例跳转
				xtiaozkon(item){
					uni.navigateTo({
						url: `/pages/components/out?id=`+ item.detailUrl,
					})
				},
				// 跳转文章详情
				loaddocen(item){
					if(item.articleInfoResp.detailType == "Video"){
						wx.getUserProfile({
						    desc: '用于完善用户信息',
						    success: (res) => {
							uni.navigateTo({
							url: `/package/detail/video?id=${item.articleInfoResp.articleId}&user=${item.simpleUserInfoResp.userId}&userInfo=${res.userInfo.avatarUrl}`,
							 })
						    }
						   })
					}else{
					wx.getUserProfile({
					           desc: '用于完善用户信息',
					           success: (res) => {
							  uni.navigateTo({
							  	url: `/package/detail/detail?id=${item.articleInfoResp.articleId}&user=${item.simpleUserInfoResp.userId}&userInfo=${res.userInfo.avatarUrl}`,
							  })
					           }
					   })
							}
				},
				// 跳转用户详细资料
				actione(item){
					 uni.navigateTo({
						url: `/pages/components/information?id=`+item.simpleUserInfoResp.userId,
						})
				},
				// 收藏
				async aaaa(item){
					this.info.articleId = item.articleInfoResp.articleId
					this.info.cancel = item.articleInfoResp.favoritesFlag
					const ress = await Api.collect(this.info)
				 	this.loaceckfr()
				},
				// 搜藏
				async souchang(item){
					console.log(item)
					this.info.articleId = item.articleId
					this.info.cancel = item.favoritesFlag
					const ress = await Api.collect(this.info)
					this.loaceckfr()
				},
				// 渲染分类
				  forminfodeet(code){
				  return hireTypet[code];
				  },
			}
		
	}
</script>

<style lang="scss">
	.van-search__content--square{
		border-radius: 20px !important;
	}
	.van-search{
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 999;
	}
	.caty-active{
		background-color: #f5f5f5;
	}
	// 经典案例列表
	.cate-liket{
		margin-top: 75rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0 32upx;
		background-color: #f5f5f5;
		.cate-rietyon{
			width: 100%;
			background-color: #FFFFFF;
			margin-bottom: 45upx;
			border-radius: 20rpx !important;
			padding-bottom: 10rpx;
		
		}
		.cate-comig{
			width: 100%;
			border-top-left-radius:20rpx;
			border-top-right-radius:20rpx;
			height: 120px;
		}
		.acty-caty{
			font-size: 24rpx;
			font-weight: 500;
			color: #ff7144;
			margin-left: 30upx;
		}
		.caet-repd{
			font-size: 24rpx;
			font-weight: 500;
			margin-left: 30upx;
			margin-top: 15upx;
			margin-bottom: 20rpx;
		}
		}
		// 加载
		.actoue{
			margin-left: 40%;
		}
		// 装修避坑
		.avtivex{
			display: inline-block;
			width: 100%;
			background-color: #fff;
			border-radius: 20px;
			margin-top: 10px;
			padding: 20rpx;
			.jiacu{
				display: inline-block;
				font-weight: 700;
				margin-left: 20rpx;
				position: absolute;
			}
			.aetra{
				display: inline-block;
				font-size: 24rpx;
				color: #a4a4a4;
		      width: 55%;
			  margin-left: 20rpx;
			  margin-bottom: 65rpx;
			    text-overflow: ellipsis;
			  overflow: hidden;
			   word-break: break-all;
			      white-space: nowrap;
			  height: 30rpx;
			}
			.cate-comig{
				width: 180rpx;
				border-radius:20rpx;
				height: 180rpx;
			}
			}
			.cate-spanonpsetas{
				display: inline-block;
				transform: translateY(-135%);
				font-weight: 500 !important;
				float: right;
				margin-right: 23rpx;
				font-size: 24rpx;
				color: #8a8a8a;
			}
			.cate-iconvter{
				display: inline-block;
				float: right;
				margin-right: 3rpx;
				transform: translateY(-135%);
			} 
			// 文章视频
				.cate-rie{	
					width: 97%;
					height: auto;
					break-inside: avoid;
					background-color: #FFFFFF;
					border-radius: 20rpx !important;
					margin-bottom: 45rpx;
					padding-bottom: 10rpx;
					break-inside: avoid
				}
				
			.cate-img{
				width: 100%;
				border-top-left-radius:20rpx;
				border-top-right-radius:20rpx;
			}
			.cate-conspan{
				display: -webkit-box;
			
			    color: #1d1d1d;
				font-size: 24rpx;
				margin-left: 20rpx;
				margin-right: 20rpx;
				margin-bottom: 10rpx;
				line-height: 28rpx;
				font-weight: 500;
				overflow:hidden;
				-webkit-line-clamp: 2; /* 能够显示的最大行数 */
			    -webkit-box-orient: vertical; 
			}
			.cate-image{
				height: 45rpx;
				width: 45rpx;
				border-radius: 50%;
			    margin-left: 20rpx;
			}
			.cate-clogion{
				    display: inline-flex;
				    width: 150rpx;
					font-size: 24rpx;
					transform: translateY(-30%);
					margin-left: 10rpx;
					color: #A8A8A8;
					
				}
				.cate-icon{
					transform: translateX(25rpx);
				}
				.cate-spanon{
					display: inline-block;
					transform: translateX(25rpx);
					font-weight: 500 !important;
					font-size: 24rpx;
					color: #8a8a8a;
				}
				// 视频
				.cate-opemak{
					background-color: rgba(0, 0, 0, 0.3);
					width: 35rpx;
					height: 35rpx;
					border-radius: 50%;
					z-index: 800;
					position: relative;
					left: 280rpx;
					bottom: 450rpx;
				}
</style>